.message {
  @apply rounded  mb-2 flex items-center px-5 py-3 w-auto h-auto bg-black-60;
  border-radius: 2.5rem;
  animation: show-ani 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  color: #cdcdcd;
  &.closed {
    animation: hide-ani 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  }
  .playToast {
    @apply flex items-center z-4;
    & > img {
      @apply w-5 h-5;
    }

    span {
      @apply text-base leading-4;
      font-family: Alibaba PuHuiTi 2;
      color: #cdcdcd;
      margin-left: 0.625rem;
    }

    .playOrder {
      @apply inline-block text-sm h-6 leading-6 bg-theme text-center text-white cursor-pointer;
      width: 4.375rem;
      border-radius: 1rem;
    }
  }
}
@keyframes show-ani {
  0% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes hide-ani {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50px);
  }
}

@media screen and (max-width: 767px) {
  .message {
    @apply mb-1 px-3 py-2;
    .playToast {
      & > img {
        @apply w-4 h-4;
      }

      span {
        @apply text-xs ml-2 leading-3;
      }

      .playOrder {
        @apply text-xs leading-6;
        width: 4rem;
        border-radius: 1rem;
      }
    }
  }
}
